<template>
	<div>
		<el-row>
			<el-col :span="24">
				<el-card class="card-image" :style="`background-image: url('/images/产品追踪.png');`" shadow="hover">
				</el-card>
			</el-col>
		</el-row>
		<!--  -->
		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover" class="my">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									销售需求分析
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<el-table :data="tableData" border style="width: 100%;margin-top: -1px;" class="my">
						<el-table-column prop="date" label="签约日期" />
						<el-table-column prop="count" label="签约总额" />
						<el-table-column prop="cost" label="产品成本" />
						<el-table-column prop="gross" label="毛利率" />
						<el-table-column prop="grossAll" label="综合毛利率" />
					</el-table>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover" class="my">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									采购在途情况
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<el-table :data="tableData" border style="width: 100%;margin-top: -1px;" class="my">
						<el-table-column prop="date" label="签约日期" />
						<el-table-column prop="count" label="签约总额" />
						<el-table-column prop="cost" label="产品成本" />
						<el-table-column prop="gross" label="毛利率" />
						<el-table-column prop="grossAll" label="综合毛利率" />
					</el-table>
				</el-card>
			</el-col>
		</el-row>
		<!--  -->
		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-card style="height: auto;" shadow="hover" class="my">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									供应分析
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<el-table :data="tableData" border style="width: 100%;margin-top: -1px;" class="my">
						<el-table-column prop="date" label="签约日期" />
						<el-table-column prop="count" label="签约总额" />
						<el-table-column prop="cost" label="产品成本" />
						<el-table-column prop="gross" label="毛利率" />
						<el-table-column prop="grossAll" label="综合毛利率" />
					</el-table>
				</el-card>
			</el-col>
		</el-row>
		<!--  -->
		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									销售价格曲线
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<div ref="echart1" style="height: 276px;"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									采购价格曲线
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<div ref="echart2" style="height: 276px;"></div>
				</el-card>
			</el-col>
		</el-row>
		<!--  -->
		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									出库曲线
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<div ref="echart3" style="height: 276px;"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									入库曲线
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<div ref="echart4" style="height: 276px;"></div>
				</el-card>
			</el-col>
		</el-row>
		<!--  -->
		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-card style="height: auto;" shadow="hover" class="my">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									出库流水
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<el-table :data="tableData" border style="width: 100%;margin-top: -1px;" class="my">
						<el-table-column prop="date" label="签约日期" />
						<el-table-column prop="count" label="签约总额" />
						<el-table-column prop="cost" label="产品成本" />
						<el-table-column prop="gross" label="毛利率" />
						<el-table-column prop="grossAll" label="综合毛利率" />
					</el-table>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import { Position, MoreFilled } from '@element-plus/icons-vue';
	import * as echarts from 'echarts';
	const tableData = [
		{
			date: '2023年08月',
			count: '200,000',
			cost: '15,000',
			gross: '50,000',
			grossAll: '25%'
		}, {
			date: '2023年07月',
			count: '3,094,800',
			cost: '1,493,400',
			gross: '1,601,400',
			grossAll: '51.7%'
		}, {
			date: '2023年08月',
			count: '200,000',
			cost: '15,000',
			gross: '50,000',
			grossAll: '25%'
		},];
	const echart1 = ref();
	const echart2 = ref();
	const echart3 = ref();
	const echart4 = ref();
	const echartOption1 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		legend: {
			bottom: 0,
			data: ['折后单价(平均值)']
		},
		toolbox: {
			feature: {
				saveAsImage: {
					title: '保存为图片'
				}
			}
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['2022年02月', '2022年03月', '2022年04月', '2022年05月', '2022年06月', '2022年07月', '2022年08月']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: '折后单价(平均值)',
				data: [4.3, 12.3, 908.6, 309.8, 208.9, 20.9, 30.9],
				type: 'line',
				color: '#5eaa7d',
				areaStyle: {
					color: '#ebf4ef'
				},
				emphasis: {
					focus: 'series'
				},
				label: {
					show: true,
					position: 'top'
				},
			}
		]
	};
	const echartOption2 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		legend: {
			bottom: 0,
			data: ['采购单价(平均值)']
		},
		toolbox: {
			feature: {
				saveAsImage: {
					title: '保存为图片'
				}
			}
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['2022年02月', '2022年03月', '2022年04月', '2022年05月', '2022年06月', '2022年07月', '2022年08月']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: '采购单价(平均值)',
				data: [4.3, 12.3, 908.6, 309.8, 208.9, 20.9, 30.9],
				type: 'line',
				color: '#5eaa7d',
				areaStyle: {
					color: '#ebf4ef'
				},
				emphasis: {
					focus: 'series'
				},
				label: {
					show: true,
					position: 'top'
				},
			}
		]
	};
	const echartOption3 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		legend: {
			bottom: 0,
			data: ['出库数量(求和)']
		},
		toolbox: {
			feature: {
				saveAsImage: {
					title: '保存为图片'
				}
			}
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['2022年02月', '2022年03月', '2022年04月', '2022年05月', '2022年06月', '2022年07月', '2022年08月']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: '出库数量(求和)',
				data: [4.3, 12.3, 908.6, 309.8, 208.9, 20.9, 30.9],
				type: 'line',
				color: '#7a7ec7',
				areaStyle: {
					color: '#eeeef7'
				},
				emphasis: {
					focus: 'series'
				},
				label: {
					show: true,
					position: 'top'
				},
			}
		]
	};
	const echartOption4 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		legend: {
			bottom: 0,
			data: ['入库数量(求和)']
		},
		toolbox: {
			feature: {
				saveAsImage: {
					title: '保存为图片'
				}
			}
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['2022年02月', '2022年03月', '2022年04月', '2022年05月', '2022年06月', '2022年07月', '2022年08月']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: '入库数量(求和)',
				data: [4.3, 12.3, 908.6, 309.8, 208.9, 20.9, 30.9],
				type: 'line',
				color: '#7a7ec7',
				areaStyle: {
					color: '#eeeef7'
				},
				emphasis: {
					focus: 'series'
				},
				label: {
					show: true,
					position: 'top'
				},
			}
		]
	};

	//
	onMounted(() => {
		initEchart();
	});

	//
	const initEchart = () => {
		// 基于准备好的dom，初始化echarts实例
		var myChart1 = echarts.init(echart1.value);
		var myChart2 = echarts.init(echart2.value);
		var myChart3 = echarts.init(echart3.value);
		var myChart4 = echarts.init(echart4.value);
		// 绘制图表
		myChart1.setOption(echartOption1);
		myChart2.setOption(echartOption2);
		myChart3.setOption(echartOption3);
		myChart4.setOption(echartOption4);
	}
</script>
<style>
	@import '../../assets/css/index.css';
</style>
<style scoped lang="scss">
	@import '../../assets/css/index.scss';
</style>